<template>
  <div id="app">
    <header class="header">
      <div class="header-left">
        <img src="@/assets/logo.png" alt="高州木偶戏" class="logo" />
      </div>
      <div class="header-center">
        <input type="search" placeholder="搜索..." class="search-input" />
        <button class="search-button">搜索</button>
      </div>
      <div class="header-right">
        <img src="@/assets/user.png" alt="用户图像" class="logo" />
        <span>个人信息</span>
      </div>
    </header>
    <nav class="navigation">
      <router-link to="/">主页</router-link>
      <router-link to="/scripts">剧本剧目</router-link>
      <router-link to="/resources">文化资源</router-link>
      <router-link to="/diy">木偶形象DIY</router-link>
      <router-link to="/music">曲目点播</router-link>
      <router-link to="/chat">和大模型对话</router-link>
    </nav>
    <main>
      <router-view />
    </main>
  </div>
</template>

<script setup lang="ts">
</script>

<style>
body {
  margin: 0;
  font-family: sans-serif;
  background-color: #f0f2f5;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
  background-color: #fefefe;
  /* Dark Green */
  color: white;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  height: 40px;
  margin-right: 10px;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.header-center {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  padding: 0 20px;
  gap: 5px;
}

.search-input {
  width: 50%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
}

.search-button {
  padding: 8px 12px;
  border: 1px solid #00796b;
  background-color: #00796b;
  color: white;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.header-right {
  display: flex;
  font-size: 18px;
  align-items: center;
  color: black;
}

.navigation {
  display: flex;
  justify-content: center;
  background-color: #6e2c1b;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
  gap: 15px;
}

.navigation a {
  margin: 0 15px;
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  font-size: 20px;
}

.navigation a.router-link-exact-active {
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
  font-size: 20px;
}

main {
  flex-grow: 1;
  padding: 5px 30px;
}
</style>
